<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线反馈</title>
    <link rel="stylesheet" href="/Public/css/gxxjkefu-normalize.css">
    <link href="/Public/css/animate.css" rel="stylesheet">
    <link rel="stylesheet" href="/Public/css/model.css">
    <link rel="stylesheet" href="/Public/css/pager.css">
    <style>
        .user_name {
            cursor: pointer;
            color: black;
        }

        .user_name:hover {
            color: #31b0d5;
        }

        .notice_info {
            padding: 25px 0 3%;
            line-height: 35px;
            color: #979797;
            float: left;
            width: 100%;
            background: #ffffff;
        }

        .feedback_ul {
            text-align: center;
            margin: 0 auto 50px;
        }

        .feedback_ul li {
            text-align: center;
            display: inline-block;
            margin: 0 30px;
        }

        .feedback_ul li a {
            color: black;
            padding: 0 0 10px;
        }

        .feedback_ul .a_active {
            color: #57bee9;
            border-bottom: solid 2px #57bee9;
        }

        .search_table thead {
            background: #f0f8fa;
            border: none;
        }

        .table {
            color: #000000;
            margin: 0 auto;
            width: 100% !important;
            text-align: center;
        }

        .search_table input {
            background: none;
            border: none;
        }

        .table > thead > tr > th {
            border-bottom: none !important;
            text-align: center !important;
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            border-top: 1px solid #f0f8fa !important;
            text-align: center !important;
        }

        .remark_div {
            color: black;
            height: 340px;
            width: 90%;
            margin: 200px auto 0;
            position: relative;
        }

        .remark_div input {
            position: absolute;
            right: 0;
            bottom: 0;
            background: #57bee9;
            border-radius: 3px;
            border: none;
            color: white;
            margin-top: 20px;
            width: 200px;
            height: 40px;
        }

        .remark_div textarea {
            background: #f5f5f5;
            border: none;
            padding: 1%;
        }
        td{
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div id="main_C" style="float: left;width: 100%" class="scrollbar animated fadeInRight" style="overflow:scroll;overflow-x:hidden;">
    <div class="title_info">
        <span>第三方支付记录</span>
    </div>
    <div class="white_bgColor notice_info">
        <!--顶部选项-->
        <ul class="feedback_ul">
            <li><a href="javascript:void(0);" class="a_active">支付宝</a></li>
            <li><a href="javascript:void(0);">连连支付</a></li>
            <li><a href="javascript:void(0);">聚合支付</a></li>
            <li><a href="javascript:void(0);">京东支付</a></li>
        </ul>

        <!--支付宝-->
        <div class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>关联订单号</th>
                    <th>金额</th>
                    <th>支付宝订单</th>
                    <th>返回信息</th>
                    <th>到账状态</th>
                    <th>订单类型</th>
                    <th>创建时间</th>
                </tr>
                </thead>
                <tbody id="t_zhifubao" class="animated fadeInRight">

                </tbody>
            </table>

            <div id="pageone" style="width: 1200px;text-align: center;margin: 100px auto 0">
                <ul class="pagination" id="page1"></ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text"/>
                    <span>页</span>
                    <button type="button" class="button"></button>
                </div>
            </div>

        </div>
        <!--//连连支付-->
        <div style="display: none" class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>商户订单</th>
                    <th>金额</th>
                    <th>连连支付订单</th>
                    <th>实际到账金额</th>
                    <th>实际到账时间</th>
                    <th>返回信息</th>
                    <th>到账状态</th>
                    <th>类型</th>
                    <th>创建时间</th>
                </tr>
                </thead>
                <tbody id="t_pay_ll" class="animated fadeInRight">

                </tbody>
            </table>

            <div id="pagetwo" style="width: 1200px;text-align: center;margin: 100px auto 0">
                <ul class="pagination" id="page2"></ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text"/>
                    <span>页</span>
                    <button type="button" class="button"></button>
                </div>
            </div>
        </div>
        <!--//聚合支付-->
        <div style="display: none" class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>商户订单号</th>
                    <th>实际到账金额</th>
                    <th>聚合平台订单号</th>
                    <th>返回结果</th>
                    <th>类型</th>
                    <th>状态</th>
                    <th>创建时间</th>
                </tr>
                </thead>
                <tbody id="t_pay_juhe" class="animated fadeInRight">

                </tbody>
            </table>

            <div id="pagethree" style="width: 1200px;text-align: center;margin: 100px auto 0">
                <ul class="pagination" id="page3"></ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text"/>
                    <span>页</span>
                    <button type="button" class="button"></button>
                </div>
            </div>

        </div>
        <div style="display: none" class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>商户订单号</th>
                    <th>金额</th>
                    <th>实际到账金额</th>
                    <th>返回结果</th>
                    <th>类型</th>
                    <th>状态</th>
                    <th>创建时间</th>
                </tr>
                </thead>
                <tbody id="t_pay_jd" class="animated fadeInRight">

                </tbody>
            </table>

            <div id="pagefour" style="width: 1200px;text-align: center;margin: 100px auto 0">
                <ul class="pagination" id="page4"></ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text"/>
                    <span>页</span>
                    <button type="button" class="button"></button>
                </div>
            </div>

        </div>
    </div>
</div>

<script src="/Public/js/jquery-3.2.1.js"></script>
<script src="/Public/js/bootstrap.min.js"></script>
<script src="/Public/js/pager.js"></script>
<script>


    var vid = window.parent.$("#vid_text").val();
    zhifubao();
    function zhifubao() {
        var url = "<{$SERVER_NAME}>/UserCenter/zhifubao";
        $.post(url, {page: 1, vid: vid}, function (data) {
            console.log('909090', data);
            if (data.code == '1001') {
                var obj = data.result;
                var s = "";
                var len = obj.length;
                console.log('32232', data.total);
                if (data.count <= 10) {
                    $("#pageone").hide();
                } else {
                    $("#pageone").show();
                }
                /*分页*/
                Page({
                    num: data.tol,					//页码数
                    startnum: 1,				//指定页码
                    elem: $('#page1'),		//指定的元素
                    callback: function (n) {	//回调函数
                        $.post(url, {page: n, vid: vid}, function (data) {
                            if (data.code == '1001') {
                                var obj = data.result;
                                var s = "";
                                var len = obj.length;
                                console.log('32232', data.total);
                                for (var i = 0; i < len; i++) {
                                    s += " <tr> " +
                                        "<td>" + obj[i].orderno + "</td>" +
                                        " <td>" + obj[i].money + "</td>" +
                                        " <td>" + obj[i].alipay_orderno + "</td>" +
                                        " <td>" + obj[i].content + "</td>" +
                                        " <td>" + obj[i].status + "</td> " +
                                        "<td>" + obj[i].type + "</td>" +
                                        " <td>" + obj[i].ctime + "</td>" +
                                        "</td> " +
                                        "</tr>";
                                }
                                document.getElementById("t_zhifubao").innerHTML = s;
                            }
                        });
                    }
                });

                for (var i = 0; i < len; i++) {
                    s += " <tr> " +
                        "<td>" + obj[i].orderno + "</td>" +
                        " <td>" + obj[i].money + "</td>" +
                        " <td>" + obj[i].alipay_orderno + "</td>" +
                        " <td>" + obj[i].content + "</td>" +
                        " <td>" + obj[i].status + "</td> " +
                        "<td>" + obj[i].type + "</td>" +
                        " <td>" + obj[i].ctime + "</td>" +
                        "</td> " +
                        "</tr>";
                }
                document.getElementById("t_zhifubao").innerHTML = s;
            } else {
            }
        });

    }
    function llzf() {
        var url = "<{$SERVER_NAME}>/UserCenter/llzf";
        $.post(url, {page: 1, vid: vid}, function (data) {
            console.log('909090', data);
            if (data.code == '1001') {
                var obj = data.result;
                var s = "";
                var len = obj.length;
                console.log('32232', data.total);
                if (data.count <= 10) {
                    $("#pagetwo").hide();
                } else {
                    $("#pagetwo").show();
                }
                /*分页*/
                Page({
                    num: data.tol,					//页码数
                    startnum: 1,				//指定页码
                    elem: $('#page2'),		//指定的元素
                    callback: function (n) {	//回调函数
                        $.post(url, {page: n, vid: vid}, function (data) {
                            if (data.code == '1001') {
                                var obj = data.result;
                                var s = "";
                                var len = obj.length;
                                console.log('32232', data.total);
                                for (var i = 0; i < len; i++) {
                                    s += " <tr> " +
                                        "<td>" + obj[i].orderno + "</td>" +
                                        " <td>" + obj[i].money + "</td>" +
                                        " <td>" + obj[i].llzf_orderno + "</td>" +
                                        " <td>" + obj[i].real_money + "</td>" +
                                        " <td>" + obj[i].real_time + "</td> " +
                                        "<td>" + obj[i].content + "</td>" +
                                        " <td>" + obj[i].status + "</td>" +
                                        " <td>" + obj[i].type + "</td>" +
                                        " <td>" + obj[i].ctime + "</td>" +
                                        "</td> " +
                                        "</tr>";
                                }
                                document.getElementById("t_pay_ll").innerHTML = s;
                            }
                        });
                    }
                });

                for (var i = 0; i < len; i++) {
                    s += " <tr> " +
                        "<td>" + obj[i].orderno + "</td>" +
                        " <td>" + obj[i].money + "</td>" +
                        " <td>" + obj[i].llzf_orderno + "</td>" +
                        " <td>" + obj[i].real_money + "</td>" +
                        " <td>" + obj[i].real_time + "</td> " +
                        "<td>" + obj[i].content + "</td>" +
                        " <td>" + obj[i].status + "</td>" +
                        " <td>" + obj[i].type + "</td>" +
                        " <td>" + obj[i].ctime + "</td>" +
                        "</td> " +
                        "</tr>";
                }
                document.getElementById("t_pay_ll").innerHTML = s;
            } else {
            }
        });

    }

    function juhe() {
        var url = "<{$SERVER_NAME}>/UserCenter/juhe";
        $.post(url, {page: 1, vid: vid}, function (data) {
            console.log('909090', data);
            if (data.code == '1001') {
                var obj = data.result;
                var s = "";
                var len = obj.length;
                console.log('32232', data.total);
                if (data.count <= 10) {
                    $("#pagethree").hide();
                } else {
                    $("#pagethree").show();
                }
                /*分页*/
                Page({
                    num: data.tol,					//页码数
                    startnum: 1,				//指定页码
                    elem: $('#page3'),		//指定的元素
                    callback: function (n) {	//回调函数
                        $.post(url, {page: n, vid: vid}, function (data) {
                            if (data.code == '1001') {
                                var obj = data.result;
                                var s = "";
                                var len = obj.length;
                                for (var i = 0; i < len; i++) {
                                    s += " <tr> " +
                                        "<td>" + obj[i].orderno + "</td>" +
                                        " <td>" + obj[i].real_money + "</td>" +
                                        " <td>" + obj[i].jh_orderno + "</td>" +
                                        " <td>" + obj[i].content + "</td>" +
                                        " <td>" + obj[i].type + "</td> " +
                                        " <td>" + obj[i].status + "</td>" +
                                        " <td>" + obj[i].ctime + "</td>" +
                                        "</td> " +
                                        "</tr>";
                                }
                                document.getElementById("t_pay_juhe").innerHTML = s;
                            }
                        });
                    }
                });

                for (var i = 0; i < len; i++) {
                    s += " <tr> " +
                        "<td>" + obj[i].orderno + "</td>" +
                        " <td>" + obj[i].real_money + "</td>" +
                        " <td>" + obj[i].jh_orderno + "</td>" +
                        " <td>" + obj[i].content + "</td>" +
                        " <td>" + obj[i].type + "</td> " +
                        " <td>" + obj[i].status + "</td>" +
                        " <td>" + obj[i].ctime + "</td>" +
                        "</td> " +
                        "</tr>";

                }
                document.getElementById("t_pay_juhe").innerHTML = s;
            } else {
            }
        });

    }

    function jd() {
        var url = "<{$SERVER_NAME}>/UserCenter/jd";
        $.post(url, {page: 1, vid: vid}, function (data) {
            console.log('909090', data);
            if (data.code == '1001') {
                var obj = data.result;
                var s = "";
                var len = obj.length;
                console.log('32232', data.total);
                if (data.count <= 10) {
                    $("#pagefour").hide();
                } else {
                    $("#pagefour").show();
                }
                /*分页*/
                Page({
                    num: data.tol,					//页码数
                    startnum: 1,				//指定页码
                    elem: $('#page4'),		//指定的元素
                    callback: function (n) {	//回调函数
                        $.post(url, {page: n, vid: vid}, function (data) {
                            if (data.code == '1001') {
                                var obj = data.result;
                                var s = "";
                                var len = obj.length;
                                for (var i = 0; i < len; i++) {
                                    s += " <tr> " +
                                        "<td>" + obj[i].orderno + "</td>" +
                                        " <td>" + obj[i].money + "</td>" +
                                        " <td>" + obj[i].real_money + "</td>" +
//                                        " <td>" + obj[i].jd_orderno + "</td>" +
                                        " <td>" + obj[i].content + "</td>" +
                                        " <td>" + obj[i].type + "</td> " +
                                        " <td>" + obj[i].status + "</td>" +
                                        " <td>" + obj[i].ctime + "</td>" +
                                        "</td> " +
                                        "</tr>";
                                }
                                document.getElementById("t_pay_jd").innerHTML = s;
                            }
                        });
                    }
                });

                for (var i = 0; i < len; i++) {
                    s += " <tr> " +
                        "<td>" + obj[i].orderno + "</td>" +
                        " <td>" + obj[i].money + "</td>" +
                        " <td>" + obj[i].real_money + "</td>" +
//                        " <td>" + obj[i].jd_orderno + "</td>" +
                        " <td>" + obj[i].content + "</td>" +
                        " <td>" + obj[i].type + "</td> " +
                        " <td>" + obj[i].status + "</td>" +
                        " <td>" + obj[i].ctime + "</td>" +
                        "</td> " +
                        "</tr>";

                }
                document.getElementById("t_pay_jd").innerHTML = s;
            } else {
            }
        });

    }

    /*备注*/
    $(document).ready(function () {
        $(".remark_btn").click(function () {
            $(".remark_div").fadeToggle(500);
        });
    });
    //选项卡切换
    $(document).ready(function () {
        $(".feedback_ul li").click(function () {
            $(".search_table").hide().eq($(this).index()).show();
            $(".feedback_ul").find("li a").removeClass("a_active");
            $(this).children("a").addClass("a_active");
            var index = $(this).index() + 1;//获取索引
            switch (index) {
                case 1://支付宝支付
                    zhifubao();
                    break;
                case 2://连连支付
                    llzf();
                    break;
                case 3://未还款
                    juhe();
                    break;
                case 4://已移交
                    jd();
                    break;
            }
        });
    });

</script>

</body>
</html>